<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
	</head>
	<body style="height: 100%; margin: 0">
		<div id="container1" style="height: 100%"></div>
		<div id="container2" style="height: 100%"></div>

		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script type="text/javascript" src="echarts-util.js"></script>
<script src="ken-compatible.js"></script>
		<script>
			/************************************ 普通仪表盘  *****************************************/
			var seriesData1 = [{
				name: '业务指标',
				type: 'gauge',
				detail: {
					formatter: '{value}%'
				},
				data: [{
					value: 50,
					name: '完成率'
				}]
			}];
			var EChartsUtil1 = new EChartsUtil({
				el: 'container1', //必填项
				subtext: "子标题",
				seriesData: seriesData1, //必填项---如果写了resetConfig  此项可以省略 利用重写的配置去实现效果
				title: '简单仪表器', //必填项
				tools:["saveAsImage","dataView","restore"],//特征工具
			});
			
			var myChart = EChartsUtil1.gauge();
			console.log(EChartsUtil1);
			
			setInterval(function() {
				var value = (Math.random() * 100).toFixed(2) - 0;
				var option = EChartsUtil1.options;
				option.series[0].data[0].value = value;
				myChart.setOption(option, true);
			}, 1500);
			
			
			
		/*************************不建议使用第二种配置 因为参数很多  建议根据业务需求将此单独封装****************/
			
			
			
			var resetConfig = {
				series: [{
						name: '速度',
						type: 'gauge',
						z: 3,
						min: 0,
						max: 220,
						splitNumber: 11,
						radius: '50%',
						axisLine: { // 坐标轴线
							lineStyle: { // 属性lineStyle控制线条样式
								width: 10
							}
						},
						axisTick: { // 坐标轴小标记
							length: 15, // 属性length控制线长
							lineStyle: { // 属性lineStyle控制线条样式
								color: 'auto'
							}
						},
						splitLine: { // 分隔线
							length: 20, // 属性length控制线长
							lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
								color: 'auto'
							}
						},
						axisLabel: {
							backgroundColor: 'auto',
							borderRadius: 2,
							color: '#eee',
							padding: 3,
							textShadowBlur: 2,
							textShadowOffsetX: 1,
							textShadowOffsetY: 1,
							textShadowColor: '#222'
						},
						title: {
							// 其余属性默认使用全局文本样式，详见TEXTSTYLE
							fontWeight: 'bolder',
							fontSize: 20,
							fontStyle: 'italic'
						},
						detail: {
							// 其余属性默认使用全局文本样式，详见TEXTSTYLE
							formatter: function(value) {
								value = (value + '').split('.');
								value.length < 2 && (value.push('00'));
								return ('00' + value[0]).slice(-2) +
									'.' + (value[1] + '00').slice(0, 2);
							},
							fontWeight: 'bolder',
							borderRadius: 3,
							backgroundColor: '#444',
							borderColor: '#aaa',
							shadowBlur: 5,
							shadowColor: '#333',
							shadowOffsetX: 0,
							shadowOffsetY: 3,
							borderWidth: 2,
							textBorderColor: '#000',
							textBorderWidth: 2,
							textShadowBlur: 2,
							textShadowColor: '#fff',
							textShadowOffsetX: 0,
							textShadowOffsetY: 0,
							fontFamily: 'Arial',
							width: 100,
							color: '#eee',
							rich: {}
						},
						data: [{
							value: 40,
							name: 'km/h'
						}]
					},
					{
						name: '转速',
						type: 'gauge',
						center: ['20%', '55%'], // 默认全局居中
						radius: '35%',
						min: 0,
						max: 7,
						endAngle: 45,
						splitNumber: 7,
						axisLine: { // 坐标轴线
							lineStyle: { // 属性lineStyle控制线条样式
								width: 8
							}
						},
						axisTick: { // 坐标轴小标记
							length: 12, // 属性length控制线长
							lineStyle: { // 属性lineStyle控制线条样式
								color: 'auto'
							}
						},
						splitLine: { // 分隔线
							length: 20, // 属性length控制线长
							lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
								color: 'auto'
							}
						},
						pointer: {
							width: 5
						},
						title: {
							offsetCenter: [0, '-30%'], // x, y，单位px
						},
						detail: {
							// 其余属性默认使用全局文本样式，详见TEXTSTYLE
							fontWeight: 'bolder'
						},
						data: [{
							value: 1.5,
							name: 'x1000 r/min'
						}]
					},
					{
						name: '油表',
						type: 'gauge',
						center: ['77%', '50%'], // 默认全局居中
						radius: '25%',
						min: 0,
						max: 2,
						startAngle: 135,
						endAngle: 45,
						splitNumber: 2,
						axisLine: { // 坐标轴线
							lineStyle: { // 属性lineStyle控制线条样式
								width: 8
							}
						},
						axisTick: { // 坐标轴小标记
							splitNumber: 5,
							length: 10, // 属性length控制线长
							lineStyle: { // 属性lineStyle控制线条样式
								color: 'auto'
							}
						},
						axisLabel: {
							formatter: function(v) {
								switch (v + '') {
									case '0':
										return 'E';
									case '1':
										return 'Gas';
									case '2':
										return 'F';
								}
							}
						},
						splitLine: { // 分隔线
							length: 15, // 属性length控制线长
							lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
								color: 'auto'
							}
						},
						pointer: {
							width: 2
						},
						title: {
							show: false
						},
						detail: {
							show: false
						},
						data: [{
							value: 0.5,
							name: 'gas'
						}]
					},
					{
						name: '水表',
						type: 'gauge',
						center: ['77%', '50%'], // 默认全局居中
						radius: '25%',
						min: 0,
						max: 2,
						startAngle: 315,
						endAngle: 225,
						splitNumber: 2,
						axisLine: { // 坐标轴线
							lineStyle: { // 属性lineStyle控制线条样式
								width: 8
							}
						},
						axisTick: { // 坐标轴小标记
							show: false
						},
						axisLabel: {
							formatter: function(v) {
								switch (v + '') {
									case '0':
										return 'H';
									case '1':
										return 'Water';
									case '2':
										return 'C';
								}
							}
						},
						splitLine: { // 分隔线
							length: 15, // 属性length控制线长
							lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
								color: 'auto'
							}
						},
						pointer: {
							width: 2
						},
						title: {
							show: false
						},
						detail: {
							show: false
						},
						data: [{
							value: 0.5,
							name: 'gas'
						}]
					}
				]
			};
			
			var EChartsUtil2= new EChartsUtil({
				el: 'container2', //必填项
				subtext: "子标题",
				seriesData: [], //必填项
				title: '复杂的仪表器', //必填项
				resetConfig:resetConfig
			});
			
			var myChart2 = EChartsUtil2.gauge();
			setInterval(function() {
				var value = (Math.random() * 100).toFixed(2) - 0;
				var option = EChartsUtil2.options;
				option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
				option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
				option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
				option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
				myChart2.setOption(option, true);
			}, 2000);
		</script>
	</body>
</html>